.modules {
  .page-header-content-view,
  .header-box {
    .content {
      display: flex;
      align-items: center;
      min-width: 830px;

      .modules-num {
        display: inline-block;
        min-width: 38px;
        padding: 2px 10px;
        text-align: center;
        color: #fff;
        font-size: 13px;
        border-radius: 15px;
        background-color: #2f333e;
        margin: 0 12px;
      }
    }
  }

  .el-card {
    margin-bottom: 20px;
  }

  .module-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;

    .item-error-tip {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 5px 20px;
      background-color: #fff8e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      border-left: 5px solid #ffb900;

      .reconnect-btn {
        width: 40px;
        height: 18px;
        line-height: 8px;
        color: #f56e28;
        border: 1px solid #f56e28;
        background-color: #fff8e5;
      }
    }

    .left-box {
      display: flex;
      width: 40%;
    }

    .item-img {
      width: 65px;
      height: 65px;
      flex-shrink: 0;
    }

    .item-content {
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      margin-right: 10px;
      align-self: flex-start;
      flex-grow: 1;

      .item-title {
        color: #101010;
        font-size: 14px;
        font-weight: bold;
        word-break: break-word;
      }

      .item-des {
        color: #000000a6;
        font-size: 12px;
        height: 36px;
        overflow: hidden;
      }

      .item-desc {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-inline-box;
        word-break: break-all;
      }

      .read-more {
        color: #23bd78;
        cursor: progress;
      }
    }
  }

  .search-input {
    .el-icon-search,
    .el-icon-loading {
      position: relative;
      left: 4px;
      top: 7px;
    }
  }

  .null-modules {
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .module-list-item {
    &:not(:last-child) .item-box {
      border-bottom: solid 1px rgb(235, 235, 235);
    }

    .item-box {
      position: relative;
      background-color: #fff;
      padding: 15px;

      &:hover {
        background-color: #f5f5f5;

        .handle-oper.select-oper {
          display: block;
        }
        .know-more {
          display: inline-block;
        }
      }

      .handle-oper.select-oper {
        display: none;
      }
      .know-more {
        display: none;
      }

      .item-handle {
        height: 85px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40%;
      }
    }
  }
}
